<!-- 滑动切换选项卡演示(标准写法) -->
<!--  此demo使用了uView的tabsSwiper全屏选项卡 https://uviewui.com/components/tabsSwiper.html -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper>
		
		<!-- 此处代码复制了uView中tabsSwiper全屏选项卡的代码 -->
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<view slot="top">
			<view class="status_bar backbule">
			  <!-- 这里是状态栏 -->
			</view>
			<view class="top backbule ">
				<view class="top-tool">
					<u-search placeholder="片名/演员" v-model="keyword" :animation="true"  @focus="search()" ></u-search>
				</view>
				<view class="top-tool1">
					<u-icon name="grid" color="#46afec" size="46" :bold="true" v-if="is_search" @click="search_ku(current)"></u-icon>
					<u-icon name="clock" color="#46afec" size="46" :bold="true" v-else></u-icon>
					<u-icon name="arrow-downward" color="#46afec" size="46" :bold="true" style="margin-left: 20rpx;" @click="ship()"></u-icon>
				</view>
			</view>
			<u-tabs-swiper ref="uTabs" :list="tabslist" :current="current" @change="tabsChange" :is-scroll="false" name="type_name"
				swiperWidth="750" active-color="#46afec" inactive-color="black" font-size="38" ></u-tabs-swiper>
		</view>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabslist" :key="index">
				<swiper-list-item :tabIndex="index" :tabtype="item.type_id" :currentIndex="swiperCurrent"></swiper-list-item>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
	</view>
</template>

<script>
	import mixinsIndex from './mixins/index.js';
	export default {
		mixins: [mixinsIndex], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				keyword:'',
				is_search:0,
				tabslist: [ {
					name: '电影'
				}, {
					name: '综艺'
				},{
					name: '动漫'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},
		methods: {
			search(){
				uni.switchTab({
					url:'/pages/search/search?item='
				});	
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				if(this.tabslist[index]['type_id']==0){
					this.is_search = 0;
				}else{
					this.is_search = 1;
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				if(this.tabslist[current]['type_id']==0){
					this.is_search = 0;
				}else{
					this.is_search = 1;
				}
			},
			search_ku(current){
				uni.setStorageSync('type_id', this.tabslist[current]['type_id']);
				uni.switchTab({
					url:'/pages/pianku/pianku'
				})
			},
			ship(){
				uni.navigateTo({
					url:'/pages/detail/detail?item='
				})
			}
		}
	}
</script>

<style>
	/* #ifdef H5 */
		.u-tabs {
			/* background: #46afec !important; */
			position: absolute;
			top: 60px;
		}
	/* #endif */
	.status_bar {
		  height: var(--status-bar-height);
		  width: 100%;
		  text-overflow: ellipsis; 
	  }
	.swiper {
		height: 100%;
	}
	.top{
		height: 200rpx;
		display: flex;
	}
	.top-tool{
		line-height: 120rpx;
		width: 530rpx;
		margin: 0 40rpx;
	}
	.top-tool1{
		line-height: 130rpx;
	}
	.u-scroll-view{
		position: absolute !important;
		top: 176rpx;
	}
	
	
</style>

